<template>
    <main>
		<section class="flex">
			<p class="flex-1 flex-center">{{ message }}</p>
			<ul>
				<li>
                    <router-link :to="{ name: $route.meta.title == '我的订单' ? 'OrderManager' : 'Order' }">
                        {{ $route.meta.title == '我的订单' ? '全部' : '我的' }}订单
                    </router-link>
                </li>
				<li>
                    <router-link :to="{ name: 'BookManager' }">图书管理</router-link>
                </li>
			</ul>
		</section>
        <Table>
            <template v-slot:thead>
                <th>ID</th>
                <th>用户名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>邮箱</th>
                <th>注册时间</th>
                <th>操作</th>
            </template>
            <tr v-for="item in userList" :key="item.id">
                <th>{{ item.id }}</th>
                <td>{{ item.username }}</td>
                <td>{{ item.age }}</td>
                <td>{{ item.gender === 0 ? '男' : '女' }}</td>
                <td>{{ item.email }}</td>
                <td>{{ formatDate(item.createTime) }}</td>
                <td>
                    <router-link class="btn-primary" :to="{ name: 'UserUpdate', params: { id: item.id } }">修改</router-link>
                    <button class="btn-danger ml-10px" @click="deleteUser(item.id)">删除</button>
                </td>
            </tr>
        </Table>
	</main>
</template>

<script>
    import Table from '../../components/Table.vue';
    import userService from '../../service/UserService';
     

    /**
     * 用户管理
     */
    export default {
        components: {
            Table
        },
        data() {
            return {
                userList: [],   // 用户列表
                message: '',    // 提示信息
            }
        },
        methods: {
            /**
             * 获取用户列表
             */
            async getUserList() {
                this.userList = await userService.getUserList();
            },
            /**
             * 删除用户
             * @param {number} id 用户id
             */
            async deleteUser(id) {
                const result = await userService.deleteUser(id);
                if (result.isSuccess) {
                    this.getUserList();
                }
                this.message = result.message;
            }
        },
        created() {
            this.getUserList();
        }
    }
</script>

<style lang="less" scoped>
    main {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    section {
        p {
            font-weight: bold;
            color: #ff0000;
        }
        ul {
            display: flex;
            justify-content: end;
            padding: 10px 0;
            padding-right: 10px;
        }
        li {
            margin-left: 20px;
        }
    }
</style>